<template>

  <el-dialog :title="$t('label_fee_details')" :visible.sync="dialogVisible" width="1200px" destroy-on-close>

    <el-row>
      <el-col :span="12">{{ $t('label_stock_age_day') }}:{{ dayRange }}</el-col>
      <el-col :span="12">{{ $t('label_sku_type') }}:{{bizType}}</el-col>
    </el-row>
    <el-alert style="margin-top: 10px;" :title="$t('tip_tenant_order_detail_formula2')" type="info" :closable="false" />
    <ex_super_table style="margin-top: 10px;" v-bind="containerDetailsOption" :data="detailList"
      ref="containerDetailsRef" />

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">{{ $t('label_close') }}</el-button>
    </div>

  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      detailList: [],
      containerDetailsOption: {
        height:300,
        model: [
          { key: 'skuName', label: 'SKU', 'show-overflow-tooltip': true,formatter: (r, c, v, i) => this.$formatNameCode(v, r.skuOnlyCode) },
          { key: 'totalQty', label: 'label_sum_stock', 'show-overflow-tooltip': true, },
          { key: 'skuAge', label: 'label_stock_age_day', 'show-overflow-tooltip': true, },
          { key: 'skuVolume', label: 'label_single_sku_volume', 'show-overflow-tooltip': true, },
          { key: 'totalVolume', label: 'label_total_volume', 'show-overflow-tooltip': true, },
          { key: 'volume', label: 'label_warehouse_fee_rental_volume', 'show-overflow-tooltip': true, },
        ],
      },
      dayRange:'',
      bizType:''
    }
  },
  methods: {
    show(data) {
      this.dayRange = data.startDay +'-'+data.endDay
      this.bizType = data.bizType
      this.dialogVisible = true
      this.$ajax({
          url: '/fms-api/client/CustomerOrderClientRpc/queryWarehouseTenantCostDetails.json',
          method: 'post',
          data: { warehouseTenantCostId: data.id },
          success: (res) => {
            this.loading = false
            this.detailList = res.data.rows
          }
        })
    }
  }
}

</script>
